<template>
  <div id="login">
    <div style>
      <div class="loginToHome">
        <el-form
          style="margin-top: 90px;"
          ref="form"
          :model="form"
          :rules="ruleForm"
          status-icon
          label-width="80px"
          class="loginForm"
        >
          <p style="font-size:30px; color:red;">后台业务管理系统</p>

          <el-form-item label="用户名" style="margin-top: 30px;" prop="name">
            <el-input type="text" v-model="form.name" auto-complete="off" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="form.password"
              auto-complete="off"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="homeBut" type="primary" plain @click="submit" :loading="logining">登录</el-button>
            <el-button class="loginBut" type="primary" plain @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      logining: false,
      form: {
        name: '',
        password: ''
      },
      ruleForm: {
        name: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      }
    }
  },
  methods: {
    submit (event) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.logining = true;
          if (this.form.name === 'admin' &&
            this.form.password === '123456') {
            this.logining = false;
            sessionStorage.setItem('user', this.form.name);
            this.$message({
              type: 'success',
              message: '登陆成功'
            });
            this.$router.push('/home')
          } else {
            this.logining = false;
            this.$alert('账号或密码错误', '提示', {
              confirmButtonText: '确定'
            })
          }
        } else {
          console.log('error submit!');
          return false;
        }
      })
    },
    resetForm () {
      this.$refs.form.resetFields();
    }

  }
}
</script>
<style>
.loginToHome {
  position: absolute;
  left: 0px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 380px;
  height: 480px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #dcdfe6;
}
.loginForm {
  text-align: center;
  padding-top: 15px;
  padding-right: 30px;
  top: 10px;
}
.homeBut {
  position: absolute;
  left: 0px;
}
.loginBut {
  position: absolute;
  right: 0px;
}
</style>
